<template>
  <view class="container">
    <view class="bg-set"></view>
    <view class="profile">
      <!-- 用户登录 -->
      <navigator url="/pages/index/index?id=1" open-type="navigate" hover-class="navigator-hover" >
        <view class="header">
          <view class="info">
            <view class="imgbox">
              <image src="../../static/images/login-logo.jpg" mode="scaleToFill" class="img" />
            </view>
            <view class="txt">
              <view style="font-size: 40rpx;font-weight: 700;">{{store.profile?.customerName}}</view>
              <view style="margin: 10rpx 0;">{{store.profile?.phoneNumber}}</view>
              <view>{{store.profile?.addressTxt}}</view>
            </view>
          </view>
          <view class="money">
            <view class="money_1">
              <view>￥{{store.profile?.rechargeAmount||'0.00'}}</view>
              <view>余额</view>
            </view>
            <view class="money_2">
              <view>￥{{store.profile?.subsidyAmount||'0.00'}}</view>
              <view>餐补</view>
            </view>
          </view>
        </view>
      </navigator>
    </view>
  </view>
  <view class="list">
    <!-- 列表栏 -->
  <uni-list>
		   <uni-list-item showArrow to="/my_pkg/notice/notice" link="navigateTo">
        <template v-slot:header>
          <view class="set">
            <view class="icon icon-lingdang"></view>
            <view>通知公告</view>
          </view>
        </template>
      </uni-list-item>
		    <uni-list-item showArrow link="navigateTo" to="/my_pkg/opinion/opinion">
        <template v-slot:header>
          <view class="set">
            <view class="icon icon-fankuiyijian"></view>
            <view>意见反馈</view>
          </view>
        </template>
        <template v-slot:footer>
        <view style="display: flex;align-items: center;">
          <uni-badge :text="reading.length" type="error" size="normal"></uni-badge>
        </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script setup>
import { useMemberStore } from '../../stores';
import {onShow } from '@dcloudio/uni-app';
import {ref} from 'vue'
import { http } from '../../utils/http';
const store = useMemberStore()
const  evaluationList=ref([])
const reading=ref([])
// 获取用户信息
onShow (()=>{
  getEvaluationInfo()
})
// 获取用户评价
const getEvaluationInfo=async()=>{
  const {data,errcode,errmsg}=await http({
    url:'/GetEvaluationInfo',
    method:'post',
    data:{
      ...store.requestData
    }
  })
  if(errcode==0){
    if(data&&data.evaluationDatas.length>0){
    evaluationList.value= data.evaluationDatas?.sort((a, b) => b.evaluationSerials - a.evaluationSerials);
reading.value=  evaluationList.value.filter(item=>item.repStatus==3)//获取商家回复但是用户未读的数据
  }
  }else{
    uni.showToast({title:errmsg,icon:'none'})
  }
  
 

}
</script>

<style scoped lang="scss">
.profile {
  height: 220rpx;
  padding: 40rpx 40rpx 0;
  border-radius: 0 0 40rpx 50rpx;
  background-color: #e5e9f0;

  .header {
    width: 100%;
    border-radius: 24rpx;
    // min-height: 400rpx;
    box-sizing: border-box;
    background-color: #75caff;
    padding: 20rpx 20rpx;
  }

  .info {
    display: flex;
    align-items: center;

    .imgbox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 150rpx;
      height: 150rpx;
      

      .img {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }

    }

    .txt {
      margin-left: 20rpx;
    }
  }

  .money {
    display: flex;
    margin-top: 30rpx;

    height: 160rpx;

    .money_1,
    .money_2 {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .money_1 {
      border-right: 2rpx solid #fff;
    }
  }


}

.list {
  // min-height: 400rpx;
  margin: 230rpx 10rpx;
  border-radius: 24rpx;
  background-color: #fff;

  .set {
    display: flex;
    align-items: center;
  }
}
.loginbox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 300rpx;
  border-radius: 24rpx;
  margin-top: 70rpx;
  box-sizing: border-box;
  padding: 0 10rpx;
  background-color: #74c8fc;
  .login{
 display: flex;
 align-items: center;
  .imgbox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      border: 2rpx solid red;
      margin-right: 20rpx;
      .img {
        width: 150rpx;
        height: 150rpx;

      }

    }
}
}
.msg{
  display: flex;
  align-items: center;
}
.bg-set {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #f4f4f4;
  z-index: -1;
}</style>